<template>
  <div class="m-content">
    <div class="content-box" v-for="item in article" :key="item.id" >
      <div class="item">
        <p class="item-tag">{{item.data}}</p>
        <p class="item-title">{{item.title}}</p>
        <p class="item-author">
          {{item.picture_author}}
        </p>
        <a href="#" class="img-wrapper">
          <img :src="item.img_url" width="375" />
        </a>
        <p class="item-content">
          {{item.content}}
        </p>
        <p class="item-time">{{item.date}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Article-Content',
  data () {
    return {
      article: []
    }
  },
  created () {
    this._getArticleList()
  },
  methods: {
    _getArticleList () {
      axios.get('/api/article.json').then((res) => {
        if (res.data && res.data.res === 0) {
          this.article = res.data.data
          console.log(res.data.data)
        }
        // console.log(res)
      }).catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.m-content
  z-index 1
  color #000000
  width 100%
  text-align center
  background-color #aaaaaa30
  .content-box
    width 100%
    background-color #ffffff
    .item
      display flex
      flex-direction column
      padding-bottom .71rem
      margin-bottom .23rem
      box-shadow: 0 0.0625em 0 0 rgba(230, 230, 230, 0.5);
      p
        margin 0 .57rem
      .item-tag
        padding .21rem
        line-height .63rem
        opacity 0.6
        font-size .57rem
        font-family: 'Courier New'
      .img-wrapper
        display block
        width 100%
        height 0
        overflow hidden
        margin .29rem 0 .57rem 0
        padding-bottom 66.7%
        img
          width 100%
      .item-author
        margin 0 .57rem
        font-size .34rem
        line-height .4rem
        color #808080
      .item-content
        color #000000
        opacity 0.6
        font-size .38rem
        margin-top .5rem
        margin-bottom .45rem
        line-height .74rem
        text-align left
</style>
